<template>
    <div>
        <el-tag :key="index" v-for="(item, index) in model" closable :disable-transitions="false" size="small" @close="handleClose(index)" class="mark-item space">
            {{item}}
        </el-tag>

        <el-input class="input-new-tag space" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="mini" @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"></el-input>

        <el-button v-if="!inputVisible && model.length < max" class="button-new-tag space" size="small" @click="showInput">
            新增
        </el-button>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: '',
        },
        max: {
            type: Number,
            default: 3,
        },
    },
    data() {
        return {
            inputVisible: false,
            inputValue: '',
        };
    },
    computed: {
        model: {
            get() {
                var val = this.value || '';

                if (val) {
                    return val.split(',');
                }

                return [];
            },
            set(val) {
                this.$emit('input', val.join(','));
            },
        },
    },
    methods: {
        handleClose(index) {
            showConfirm('是否删除该内容，删除后不可撤销', 'warning', () => {
                this.model.splice(index, 1);
                this.$emit('input', this.model.join(','));
            });
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(() => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;

            if (inputValue) {
                this.model.push(inputValue);
                this.$emit('input', this.model.join(','));
            }

            this.inputVisible = false;
            this.inputValue = '';
        },
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

.mark-item {
    margin-right: 10px;
}

.space {
    margin-right: 10px;
    margin-bottom: 0px;
    margin-top: 0px;
}

.button-new-tag {
    height: 24px;   //32
    line-height: 22px;  //30
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid $primaryColor;
    color: $primaryColor;
}

.input-new-tag {
    width: 120px;
    vertical-align: bottom;
}

::v-deep.el-tag {
    color: #333;
    background-color:#EAEAEA ;
    border-radius: 0;

}

.el-tag ::v-deep.el-icon-close {
    border-radius: 99%;
    // text-align: center;
    position: absolute;
    // cursor: pointer;
    // font-size: 11px;
    // height: 16px;
    // width: 16px;
    // line-height: 16px;
    // vertical-align: middle;
    top: -7px;
    right: -8px;
    background: #c5c5c5;
    color: #fff;
}
.el-tag ::v-deep.el-icon-close:hover{
    // color:  $primaryColor;
    background-color: $primaryColor;

}
</style>